<template>
    <div class = 'basemap-wrapper'>
		<div class = 'map-list-bar jimu-map-panel' @click="toggleMapList">
			<i class = 'iconfont icon-Layer'></i>
		</div>
		<div class = 'map-list-container jimu-map-panel jimu-show' v-if = "isShow">
			<div class = 'group' v-for = "data in baseMapData" :key="data.type" >
			<div class = 'group-title'>{{data.type}}</div>
				<ul class="list">
					<li class="item" v-for="basemap in data.baseMapList" 
									:key="basemap.key" 
									:style = "backgroundImage(basemap)"
									:class="{'on':basemap.key === config.baseMapKey}"
									@click="changeBaseMap(basemap.key)"
									@mouseover="mouseOverHandle(basemap.key)"
									@mouseout="mouseOutHandle"
					>
						<div class="map-item-label" v-show="currentMouseKey===basemap.key || basemap.key === config.baseMapKey">{{basemap.label}}</div>
					</li>
				</ul>
			</div>
		</div>	
    </div>
</template>

<script>
import BaseWidget from '@/jimu/BaseWidget.js'
import Vue from 'vue'
export default {
	name: 'BaseMapWidget',
	mixins:[ BaseWidget ],
	data () {
		return {
			currentMouseKey: "",
			isShow: false
		}
	},
	created: function () {
		
	},

	mounted: function() {
		
	},

	destroyed: function(){
		this.removeBodyClick()
	},

	computed: {
		map: function(){
			return this.shareState.map
		},
		baseMapLayer: {
			get: function () {
				return this.shareState.baseMap
			},
			set: function (newValue) {
				this.shareState.baseMap = newValue
			}
		},

		baseMapData: function(){
			return this.config.baseMapData
		},

		baseMapList: function(){
			let baseMapList = []
			this.config.baseMapData.forEach((data)=>{
				baseMapList = baseMapList.concat(data.baseMapList)
			})
			return baseMapList
		},
		
	},

	methods:{
		backgroundImage: function(baseMap){
			return "background-image:url("+ baseMap.thumb +")"
		},
		changeBaseMap: function(key){
			let baseMapConfig = null;
			this.baseMapList.forEach(baseMap => {
				if(baseMap.key === key){
					this.config.baseMapKey = key
					baseMapConfig = baseMap
				}
			});
			if(baseMapConfig){
				this.map._container.style.backgroundColor = baseMapConfig.colorStyle
				this.baseMapLayer.remove()
				this.baseMapLayer = new G.Layer.Tile(baseMapConfig.url, {
					cluster: baseMapConfig.cluster
				});
				this.baseMapLayer.addTo(this.map)
				this.baseMapLayer.bringToBottom()
			}
		
		},
		mouseOverHandle: function(key){
			this.currentMouseKey = key
		},
		mouseOutHandle: function(){
			this.currentMouseKey = ""
		},
		toggleMapList: function(){
			this.isShow = !this.isShow
			if(this.isShow){
				this.addBodyCLick()
			}else{
				this.removeBodyClick()
			}
		},
		closeMapList: function(e) {
			if (this.$el && this.$el.contains(e.target)) {
            	return
        	}
			this.isShow = false
			this.removeBodyClick()
		},
		addBodyCLick: function(){
			document.body.addEventListener('click', this.closeMapList);
		},
		removeBodyClick: function(){
			document.body.removeEventListener('click', this.closeMapList);
		}
	}
}
</script>

<style lang="scss">
	$barWidth: 35px;
	.basemap-wrapper{
		position: absolute;
		z-index: 999;
		.map-list-bar{
			height: $barWidth;
			width: $barWidth;
			cursor: pointer;
			display: inline-block;
			text-align: center;
			line-height: $barWidth;
			font-size: 20px;
		}
		.map-list-bar:hover{
			color:#409eff
		}
		.map-list-container{
			border: 1px solid #ebebeb;
			padding: 16px 16px 8px 16px;
			width: 273px;
			position: absolute;
			top:0;
			left: $barWidth + 10px;
		}
		.group{
			.group-title{
				font-size: 12px;
				color: rgba(0, 0, 0, 0.75);
				height: 18px;
				border-left: 2px solid #4087f7;
    			padding-left: 5px;
			}
			.item{
				display: inline-block;
				height: 56px;
				width: 56px;
				line-height: 56px;
				background-size: contain;
				margin:5px 5px 5px 0px;
				border-radius: 2px;
				text-align: center;
				border: 1px solid #cecece;
				box-shadow: 0 0 6px 0 rgba(0,0,0,.1);
				position: relative;
				cursor: pointer;
				transition: all .3s;
				&:last-child{
					margin:5px 0 5px 0px;
				}
				&:nth-child(4){
					margin:5px 0 5px 0px;
				}
				.map-item-label{
					width: 100%;
					background-color: #4087f7;
					color: #fff;
					height: 20px;
					font-size: 10px;
					line-height: 20px;
					bottom: 0;
					position: absolute;
				}
			}
			
			.on{
				border: 1px solid #4087f7;
			}
		}
		
	}
</style>